<template>
    <div class="login-wrapper">
        <header class="header-content">
            <div class="img-content">
                <img src="../assets/email1.png" alt="">
                 <p>VelaHK MAIL</p>
            </div>
        </header>
      <div class="login-box">
        <!-- 左侧插图 -->
        <div class="login-left">
            <img src="../assets/rw.png" alt="">
          <!-- <img src="@/assets/login-bg.png" alt="illustration" /> -->
        </div>
  
        <!-- 右侧登录表单 -->
        <div class="login-right">
          <h2 class="welcome-title">
            <span class="hello">Hello!</span> 欢迎登录VelaHK邮箱
          </h2>
          <!-- Welcome to xx mailbox -->
          <p class="subtitle">WELCOME TO VelaHK MAIL</p >
  
          <el-form :model="form" :rules="rules" ref="formRef" class="login-form">
            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="请输入账号" :prefix-icon="UserFilled" />
            </el-form-item>
  
            <el-form-item prop="password">
              <el-input style="margin-top:10px;" v-model="form.password" type="password" placeholder="请输入密码" :prefix-icon="Lock" />
            </el-form-item>
  
            <el-button type="primary" class="login-btn" @click="onLogin" :loading="loading">登 录</el-button>
          </el-form>
  
          <div class="copyright">
            <el-checkbox v-model="checked2" text-color="#000">我已阅读并同意 <router-link to="/agreement">服务协议</router-link> 和 <router-link to="/agreementDoc">隐私政策</router-link> </el-checkbox>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import {
    UserFilled,
    Lock
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
  const checked2 = ref(false)
  const formRef = ref()
  const form = reactive({
    username: '',
    password: ''
  })
  const loading = ref(false)
  
  const rules = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  }
  
  const onLogin = () => {
    loading.value = true
    setTimeout(() => {
        router.push('/Inbox')
        loading.value = false
    }, 2000);
    // formRef.value.validate((valid) => {
    //   if (valid) {
    //     ElMessage.success('登录成功，跳转中...')
    //     // 可以在这里对接真实接口
    //   }
    // })
  }
  </script>
  
  <style scoped>
  .header-content{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    box-shadow: 0 10px 8px -10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #f3f6f9, #d5deeb);
  }
  .img-content{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    padding:0 20px;
    height:70px;
    display:flex;
    align-items:center;
    
     /* 底部阴影效果 */
     
  }
  .img-content p{
    font-family: "Georgia", sans-serif;
    margin-left:10px;
    font-size:16px;
  }
  .img-content img{
    width:25px;
    height:25px;
  }
  .login-wrapper {
    height: 100vh;
    background: linear-gradient(135deg, #f3f6f9, #d5deeb);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-box {
    width: 900px;
    height: 500px;
    display: flex;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  
  .login-left {
    flex: 1;
    background-color: #f5f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-left img {
    width: 90%;
    max-width: 400px;
  }
  
  .login-right {
    flex: 1;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
  }
  
  .welcome-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .hello {
    color: #1678ff;
    margin-right: 6px;
  }
  
  .subtitle {
    color: #999;
    margin-bottom: 30px;
  }
  
  .login-btn {
    width: 100%;
    height:40px;
    line-height:30px;
    margin-top: 20px;
    font-size:16px;
    background: #1678ff;
    border-color: #1678ff;
  }
  
  .login-btn:hover {
    background: #4496ff;
    border-color: #4496ff;
  }
  
  .login-form {
    max-width: 360px;
  }
  
  .login-form .el-input {
    height: 45px;
    font-size: 14px;
  }
  .login-form /deep/ .el-input .el-icon{
    font-size:20px;
  }
  
  .el-input__wrapper {
    border-radius: 20px;
  }
  
  .copyright {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin-top: 40px;
  }
  .copyright a{
    font-size:14px;
    color:#1678ff;
    text-decoration: none;
  }
  .copyright /deep/.is-checked .el-checkbox__label{
    color:#606266;
  }
  </style>